<%--
  Created by IntelliJ IDEA.
  User: 刘弗莫尔
  Date: 2021/10/15
  Time: 13:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajaxlist02.jsp</title>
</head>
<body>
<input type="button" id="btn01" name="btn01" value="获取books表里面的内容"/>
<table width="500" align="center" border="1">
    <tr>
        <th>书籍编号</th>
        <th>书籍名称</th>
        <th>页数</th>
        <th>备注</th>
    </tr>
    <tbody id="content">
    </tbody>
</table>
</body>
</html>
<script src="${pageContext.request.contextPath}/webjars/jquery/3.5.1/jquery.min.js">

</script>
<script type="text/javascript">
    $(document).ready(function (){
        $("#btn01").click(function (){
            $.ajax({
                type: "GET",
                url: "${pageContext.request.contextPath}/ajax2/list01",
                //msg就是控制器里面out.println输出的返回的内容
                success: function(msg){
                    //通过jquery里面的JSON对象，将传递的msg信息，转化为jquery里面的json对象数组
                    var data = JSON.parse(msg);
                    //alert( "ajax返回list的springmvc处理的结果为：" + msg );
                    var html="";
                    //循环json对象数组里面的内容
                    for (var i = 0; i <data.length ; i++) {
                        //i是json对象数组下标,json对象的属性和实体类属性名字相同:bookid,bookname,bookcounts,detail
                        //下面的使用+=进行拼接html内容，每一行都是一个tr文本
                        //这里循环几次就有几个tr，表格对应起来有几行
                        html += "<tr align='center'>" +
                            "<td>" + data[i].bookid + "</td>" +
                            "<td>" + data[i].bookname + "</td>" +
                            "<td>" + data[i].bookcounts + "</td>" +
                            "<td>" + data[i].detail + "</td>" +
                            "</tr>"
                    }
                    //在tbody上面替换内容
                    $("#content").html(html);
                }
            });
        });
    });
</script>

